import PropTypes from 'prop-types';
// import classnames from 'classnames';
import React from 'react';
import chunk from 'lodash/chunk';
import css from './index.less';

import itemBg from 'assert/img/otherImgs/item.png';

export default class RenderClass extends React.Component {

  static propTypes = {
    itemDetail: PropTypes.array.isRequired,

  };

  static defaultProps = {


  };


  constructor(props) {
    super(props);
    this.state = {
      active: 0,
    };

    this.itemDetail = props.itemDetail.slice(0);


    // console.log('this.itemDetail', this.itemDetail);
  }

  componentDidMount() {

    this.newSwiper();
    // this.closeRef.current.addEventListener('touchstart', this.onClearTimer, false);
  }

  componentWillUnmount() {

  }

  // stopPlay = () => {
  //   console.log(222);
  //   this.swiper.autoplay.stop();
  // };

  newSwiper = () => {
    const that = this;
    this.swiper2 = new Swiper('.swiper2', {
      loop: true,
      grabCursor: true,
      // initialSlide: 0,
      centeredSlides: true,
      slidesPerView: 'auto',
      speed: 10000,
      autoplay: {  // 组件卸载后会继续执行定时器
        delay: 0,
        disableOnInteraction: false,
        waitForTransition: false,
      },
      direction: 'vertical',
      on: {
        slideChange: function() {
          let { activeIndex } = this;
          const { active } = that;
          if (active !== activeIndex) {
            if (activeIndex === 7) activeIndex = 1;
            if (activeIndex === 0) activeIndex = 6; // 切换时图片1的active是1
            that.setState({
              active: activeIndex
            });
          }
        },
      }
    });
  };


  renderItem(item, index) {

    const { getId = () => {}, } = this.props;

    const imgProps = {
      // src: `${item.picUrl}_q80_.webp`,
      className: css.img,
    };



    return (
      item.map( (it, ind) => {
        const boxProps = {
          key: ind,
          className: css.box,
          style: {
            marginLeft: (index + 1) % 3 === 1 ? '0' : '10px',
            background: `url(${itemBg}) no-repeat`,
          },
          onClick: (e) => {
            e.stopPropagation();
            getId(it.goodsTaobaoId);
            // FEED(item.goodsTaobaoId);
          },
        };
        return (
          <div {...boxProps} >
            <img {...imgProps} src={`${it.picUrl}_q80_.webp`}/>
            <div className={css.title}>{`${it.customTitle.slice(0, 21)}...`}</div>
          </div>
        );
      })
    );

  }


  renderGoods() {
    let good = chunk(this.itemDetail, 3);
    return (
      good.map((item, index) => {
        // console.log('item', item);
        return (
          <div className={'swiper-slide'} key={index}>
            {this.renderItem(item, index)}
          </div>
        );
      })
    );
  }



  render() {

    return (
      <div onClick={ (e) => e.stopPropagation()}>
        <div className="swiper-container swiper2">
          <div className="swiper-wrapper">
            {
              this.renderGoods()
            }
          </div>
        </div>
      </div>
    );
  }
}
